<template>
	<view>
		<!-- 武器信息 -->
		<u-mask :show="showequip" @click="showequip = false">
			<view class="warp">
				<view class="maskbox">
					<view class="m_title">
						{{eqinfo.name}}
					</view>
					<view class="line"></view>
					<view class="m_content">
						<view class="boxbg">
							<image :src="imgurl + eqinfo.img" mode="widthFix" />
						</view>
						<view class="m_right">
							<text>部件：{{eqinfo.type == 1?'其他':eqinfo.type == 2?'其他':eqinfo.type == 3?'其他':eqinfo.type == 4?'其他':eqinfo.type == 5?'其他':eqinfo.type == 6?'其他':eqinfo.type == 7?'其他':eqinfo.type == 8?'其他':eqinfo.type == 9?'其他':eqinfo.type == 10?'其他':eqinfo.type == 15?'其他':eqinfo.type == 20?'其他':'其他'}}</text>
							<text v-if="eqinfo.lv || eqinfo.lv  == 0">等级：{{eqinfo.lv}}级</text>
							<text v-else>等级：无等级限制</text>
						</view>
					</view>
					<!-- <view class="line"></view>
					<view class="botbox">
						<text>简介：</text>
						<text v-if="eqinfo.type == 20"> 可去活动-实物兑换页兑换奖励</text>
						<text v-else>{{eqinfo.desc}}</text>
					</view> -->
				</view>
				
				<view class="every">
					<text>点任意区域关闭</text>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		name:"Equipinfo",
		props:{
			eqinfo:{
				type:Object,
				default:{}
			},
		},
		data() {
			return {
				imgurl:config.imgurl,
				showequip:false
			};
		},
		methods: {
			show(){
				this.showequip = true
			},
		},
	}
</script>

<style lang="less">
	
	// 弹窗
	.warp {
		width: 90%;
		position: relative;
		left: 5%;
		top: 50%;
		transform: translateY(-50%);
	}

	.maskbox {
		background: rgba(0,0,0,0.44);
		border-radius: 7px;
		border: 1px solid rgba(254,225,195,0.74);
		padding: 15px;
	}

	.m_title {
		font-size: 14px;
		font-weight: 600;
		color: #FEE1C3;
		line-height: 20px;
		padding: 10px;
	}

	.m_content {
		padding: 10px;
		display: flex;
		align-items: center;

		image {
			width: 55px;
			margin-right: 12px;
		}
	}

	.m_right {
		display: flex;
		flex-direction: column;

		text:nth-child(1) {
			color: #00FF56;
			font-size: 13px;
		}

		text:nth-child(2) {
			color: #FEE1C3;
			font-size: 13px;
			margin-top: 5px;
		}
	}

	.botbox {
		margin: 20px 0 10px;
		padding: 12px;
		display: flex;
		flex-direction: column;

		text:nth-child(1) {
			color: #fff;
			font-size: 16px;
			font-weight: 600;
		}

		text:nth-child(2) {
			color: rgba(255, 255, 255, 0.7);
			font-size: 13px;
			margin-top: 10px;
		}
	}

	.every {
		text-align: center;
		margin-top: 20px;
		
		text {
			color: #fff;
			font-size: 12px;
		}
		
	}


	.boxbg {
		width: 60px;
		height: 60px;
		background: url('http://img.cpgm.cc/panda/static/backpag/pagbg.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 8px;
		margin-right: 10px;

		image {
			width: 100%;
		}
	}
	.empty {
		text-align: center;
		line-height: 50vh;
		color: #986d43;
		font-weight: 600;
		font-size: 14px;
	}
</style>